<template>
  <div id="student-exam-list">
    <!-- {{ resData }} -->
    <div v-if="!resData.length" class="nodata-box">暂无考试内容</div>
    <el-row>
      <el-col :span="6" v-for="(item,index) in resData" :key="index">
        <div class="jx-content">
          <div class="stu-item1"> {{ item.paperName }}</div>
          <div class="stu-item2">
            <div v-if="item.isTesting">试卷时长 {{ item.time }}分钟</div>
            <el-button :disabled="!item.isTesting" @click="reEx(item.paperId,item.paperStatus)" class="button-style">{{ item.paperStatusMessage }}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      resData: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    //自动交卷返回
    reAutoSubmit() {
      let that = this;
      if (that.$route.params) {
        let endTimePaperId = that.$route.params.endTimePaperId;
        let listItem = that.resData.find(
          item => item.paperId == endTimePaperId
        );
        listItem.isTesting = false;
        listItem.paperStatusMessage = "考试已结束";
      }
    },
    //获取试卷列表
    getList() {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //列表赋值
              that.resData = res.data.data;
              console.log(that.resData, 112233);
              //考试时间到，先手动禁用
              that.reAutoSubmit();
            }
            else{
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //开始考试
    reEx(paperId, paperStatus) {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/paper"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              if (paperStatus === 1) {
                //进入考试页面
                that.$router.push({
                  path: "/StartExam",
                  query: {
                    paperId: paperId
                  }
                });
              }
              if (paperStatus === 2) {
                //进入考试页面
                that.$router.push({
                  path: "/StartExamTest",
                  query: {
                    paperId: paperId
                  }
                });
              }
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //验证交卷状态
    reEx1(paperId) {
      let that = this;
      that.$message.error("已交卷");
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/status"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //列表赋值
              let status = res.data.data.paperStatus;
              //1 理论
              //2 实验
              //3,4
              let data = res.data.data;
              console.log(data, 11111);

              // let obj = data.find(item => item.paperId === paperId);
              // if (obj.paperStatus > 2) {
              //   that.$message.error("已交卷");
              //   //进入考试页面
              //   that.$router.push({
              //     path: "/StudentExamList"
              //   });
              // }
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#student-exam-list {
  width: 1200px;
  margin: 20px auto;
  .el-col {
    padding: 0 10px;
  }
  .jx-content {
    width: auto;
    padding: 20px;
    font-size: 16px;
    line-height: 24px;
    .stu-item1 {
      height:48px;
      margin-bottom: 15px;
    }
    .stu-item2 {
      height: 20px;
      position: relative;
      padding-top: 15px;
      border-top: 1px solid #ddd;
      .button-style {
        position: absolute;
        right: 4px;
        top: 12px;
      }
    }
  }
}
</style>
